<!--template标签，每个页面的最外层都是这个标签，这是vue上的功能-->
<template>
    <!-- 页面div，这个是若依框架的样式 -->
    <div class="app-container">
  
      <!-- 搜索区域开始，使用了ElementUI的form表单 -->
      <el-form :model="queryParams" ref="queryform" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <!-- 搜索条件:借用人 -->
        <el-form-item label="借用人" prop="userId">
          <el-input 
            v-model="queryParams.userName" 
            placeholder="请输入姓名" 
            clearable 
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <!-- 搜索条件:借用时间 -->
        <el-form-item label="借用时间" prop="borrowTime">
          <el-date-picker clearable 
            v-model="queryParams.borrowTime" 
            type="date" 
            value-format="yyyy-MM-dd" 
            placeholder="请选择借用时间"
          ></el-date-picker>
        </el-form-item>
        <!-- 搜索和重置按钮 -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 搜索区域结束 -->
  
      <!-- 工具按钮区域 -->
      <el-row :gutter="10" class="mb8">
        <!-- 左侧:新增按钮 -->
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleBorrow"
            v-hasPermi="['device:deviceBorrow:add']"
          >快速借出</el-button>
        </el-col>
        <!-- 右侧:隐藏搜索按钮和刷新按钮 -->
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <!-- 工具按钮区域结束 -->
  
      <!-- 列表区域开始 -->
      <el-table v-loading="loading" :data="deviceBorrowList" border>
        <el-table-column label="借用人工/学号" align="center" prop="user.userName" />
        <el-table-column label="借用人" align="center" prop="user.nickName" />
        <el-table-column label="设备" align="center" prop="device.deviceName" />
        <el-table-column label="型号" align="center" prop="device.deviceModel" />
        <el-table-column label="照片" align="center" prop="device.deviceImg" width="100">
          <template slot-scope="scope">
            <image-preview :src="scope.row.device.deviceImg" width="50" height="50" />
          </template>
        </el-table-column>
        <el-table-column label="借用说明" align="center" prop="borrowRemark" />
        <el-table-column label="领取时间" align="center" prop="borrowTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.borrowTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="计划归还时间" align="center" prop="returnTime" width="186">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.returnTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="归还说明" align="center" prop="returnRemark" />
        <el-table-column label="状态" align="center" prop="returnStatus">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.device_borrow_status" :value="scope.row.returnStatus" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleReturn(scope.row)"
              v-if="scope.row.returnStatus == 1"
              v-hasPermi="['device:deviceBorrow:edit']"
            >快速归还</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleCheck(scope.row)"
              v-hasPermi="['device:deviceBorrow:edit']"
              v-if="scope.row.returnStatus == 0 || scope.row.returnStatus == 2"
            >审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 列表区域结束 -->

      <!-- 分页按钮区域开始 -->
      <pagination 
        v-show="total > 0"
        :total="total" 
        :page.sync="queryParams.pageNum" 
        :limit.sync="queryParams.pageSize" 
        @pagination="getList"
      />
      <!-- 分页按钮区域结束 -->
  
      <!-- 弹出层开始(快速借出和快速归还) -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="借用人" prop="userId">
            <!-- input组件的自动补全功能，用法请参考: https://element.eleme.cn/#/zh-CN/component/input -->
            <el-autocomplete 
              v-model="queryUserName" 
              :fetch-suggestions="queryUserAsync" 
              placeholder="请输入借用人姓名" 
              :trigger-on-focus="false" 
              style="width: 380px" 
              @select="userSelectHandler" 
              :disabled="isEdit"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="设备" prop="deviceId">
            <!-- input组件的自动补全功能，用法请参考: https://element.eleme.cn/#/zh-CN/component/input -->
            <el-autocomplete
              v-model="queryDeviceName"
              :fetch-suggestions="queryDeviceAsync"
              placeholder="请输入设备名"
              :trigger-on-focus="false"
              style="width: 380px"
              @select="deviceSelectHandler"
              :disabled="isEdit"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="借用说明" prop="borrowRemark">
            <el-input v-model="form.borrowRemark" placeholder="请输入借用说明" :disabled="isEdit" />
          </el-form-item>
          <el-form-item label="领取时间" prop="borrowTime">
            <el-date-picker clearable
              v-model="form.borrowTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 380px"
              placeholder="请选择借用时间"
              :disabled="isEdit"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="归还时间" prop="returnTime">
            <el-date-picker clearable
              v-model="form.returnTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 380px"
              placeholder="请选择计划归还时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="设备状态" prop="deviceStatus" v-if="showDeviceStatus">
            <!-- 不使用数据字典，直接在页面上写入状态数据 -->
            <el-radio-group v-model="form.deviceStatus">
              <el-radio label="-1">废弃</el-radio>
              <el-radio label="0">正常</el-radio>
              <el-radio label="2">损坏</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="归还说明" prop="returnRemark" v-if="showDeviceStatus">
            <el-input v-model="form.returnRemark" placeholder="请输入归还说明"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
      </el-dialog>
      <!-- 弹出层结束 -->
  
    </div>
  </template>
  <!-- 页面 UI 部分结束 -->
  
  <!-- 以下全部为页面功能 js 实现 -->
  <script>
  import { listBorrow, getBorrow, addBorrow, updateBorrow, queryUser, queryDevice } from "@/api/device/deviceBorrow";
  
  // vue 页面 js
  export default {
    name: "DeviceBorrow",
    dicts: ['device_status', 'device_borrow_status'],
    data() {
      return {
        // 遮蔽层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 借用信息表格数据
        deviceBorrowList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 借用人姓名
        queryUserName: "",
        // 设备名称
        queryDeviceName: "",
        // 是否显示设备状态
        showDeviceStatus: false,
        // 编辑标识
        isEdit: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          deviceId: null,
          userName: null,
          borrowTime: null,
          borrowRemark: null,
          borrowImg: null,
          returnTime: null,
          returnStatus: null,
          returnImg: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          deviceId: [
            { required: true, message: "设备名称不能为空", trigger: "blur" }
          ],
          userId: [
            { required: true, message: "借用人不能为空", trigger: "blur" }
          ],
          borrowTime: [
            { required: true, message: "借用时间不能为空", trigger: "blur" }
          ],
          returnTime: [
            { required: true, message: "计划归还时间不能为空", trigger: "blur" }
          ]
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询借用信息列表 */
      getList() {
        this.loading = true;
        listBorrow(this.queryParams).then(response => {
          this.deviceBorrowList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 查询用户
      queryUserAsync(querystring, cb) {
        let result = [];
        if (querystring == '') {
          cb(result);
        } else {
          queryUser(querystring).then(res => {
            if (res.code == 200) {
              result = res.data;
            }
            cb(result);
          });
        }
      },
      // 选择自动补全的用户信息
      userSelectHandler(item) {
        this.form.userId = item.userId;
      },
      // 查询设备
      queryDeviceAsync(querystring, cb) {
        let result = [];
        if (querystring == '') {
          cb(result);
        } else {
          queryDevice(querystring).then(res => {
            if (res.code == 200) {
              result = res.data;
            }
            cb(result);
          });
        }
      },
      // 选择自动补全的设备信息
      deviceSelectHandler(item) {
        this.form.deviceId = item.deviceId;
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          borrowId: null,
          deviceId: null,
          userId: null,
          borrowTime: null,
          borrowRemark: null,
          borrowImg: null,
          returnTime: null,
          returnStatus: null,
          returnImg: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null
        };
        this.queryUserName = null;
        this.queryDeviceName = null;
        this.resetForm("form");
      },
      /**搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /**重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /**快速借用按钮操作 */
      handleBorrow() {
        this.reset();
        this.open = true;
        this.title = "快速借用";
        this.isEdit = false;
        this.showDeviceStatus = false;
        this.form.returnStatus = 1;
      },
      /** 快速归还按钮操作 */
      handleReturn(row) {
        this.reset();
        const borrowId = row.borrowId;
        getBorrow(borrowId).then(response => {
          this.form = response.data;
          this.form.deviceStatus = 0;
          this.form.returnStatus = 3;
          this.queryUserName = response.data.user.nickName;
          this.queryDeviceName = response.data.device.deviceName;
          this.open = true;
          this.title = "快速归还";
          this.isEdit = true;
          this.showDeviceStatus = true;
        });
      },
      /** 审核按钮 */
      handleCheck(row) {
        this.reset();
        const borrowId = row.borrowId;
        getBorrow(borrowId).then(response => {
          this.form = response.data;
          this.form.deviceStatus = 0;
          this.queryUserName = response.data.user.nickName;
          this.queryDeviceName = response.data.device.deviceName;
          this.open = true;
          this.title = row.returnStatus == 0 ? "借用审核" : "归还审核";
          this.form.returnStatus = row.returnStatus == 0 ? 1 : 3;
          this.isEdit = true;
          this.showDeviceStatus = row.returnStatus == 0 ? false : true;
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.borrowId != null) {
              updateBorrow(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addBorrow(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download("device/deviceBorrow/export", {
          ...this.queryParams
         }, `deviceBorrow_${new Date().getTime()}.xlsx`)
        }
      },
    };
  </script>
  